import React from "react";
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
import "./todo.css";
import { Layout, Tabs, Input } from "antd";
import TodoItem from "../component/todoItem";

import { connect } from "react-redux";
import { addEvent } from "../Redux/actions";

const { TabPane } = Tabs;
const { Search } = Input;
const { Header, Footer, Content } = Layout;
class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      todolist:[]
    }
  }
  callback(key) {
    console.log(key);
  }
  componentWillReceiveProps(){
    console.log(this.props.todolist);
    // this.setState({
    //   todolist:this.props.todolist
    // })
    // console.log(this.state.todolist);
  }
  render() {
    return (
      <div className="todo_container">
        <Layout>
          <Header className="todo_nav_bar">
            <Search
              style={{ width: 600 }}
              placeholder="提交文本"
              onSearch={(value)=>{
                console.log(value);
                this.props.add(addEvent(value));
              }}
              enterButton="提交"
            />
          </Header>
          <Content>
            <div className="todo_container_con">
              <div className="todo_container_connect">
                <Tabs defaultActiveKey="1" onChange={this.callback}>
                  <TabPane tab="全部" key="1"></TabPane>
                  <TabPane tab="未完成" key="2"></TabPane>
                  <TabPane tab="已完成" key="3"></TabPane>
                  <TabPane tab="回收站" key="4"></TabPane>
                </Tabs>
                <div className="todo_list">
                  {this.props.todolist.map((item) => {
                    return <TodoItem connect={item.con} />;
                  })}
                </div>
              </div>
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
          
          </Footer>
        </Layout>
      </div>
    );
  }
}
function mapStateToProps(rootReducer) {
  return {
    todolist: rootReducer.changeStatus.todolist,
  };
}
function mapActionToProps(dispatch) {
  return {
    add: (action) => {
      dispatch(action);
    },
  };
}
export default connect(mapStateToProps,mapActionToProps)(Todo);
